<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		getOrderDetailApi,
		cancelOrderApi,
		completeOrderApi
	} from '@/apis/order'
	import {
		toast,
		route
	} from 'uview-plus'
	import {
		payApi
	} from '@/apis/pay'



	const orderNo = ref('')

	onLoad((e) => {
		orderNo.value = e.orderNo
	})

	const orderDetails = ref({})
	// 获取订单详情
	const getOrderDetail = async () => {
		const res = await getOrderDetailApi(orderNo.value)
		orderDetails.value = res.data.data
	}

	onShow(() => {
		getOrderDetail()
	})

	// 确定信息的模态框
	const modalRef = ref(null)
	// 控制模态框
	const showModal = ref(false)

	// 确定按钮
	const confirmModal = async () => {
		if (orderDetails.value.orderStatus === 3) {
			await completeOrderApi(orderDetails.value.id)
		} else {
			uni.showLoading({
				title: '取消订单中'
			})
			await cancelOrderApi({
				id: orderDetails.value.id,
				extraInfo: '用户取消订单'
			})
			uni.hideLoading()
		}

		getOrderDetail()
		showModal.value = false
	}

	//关闭提示模态框
	const closeModal = () => {
		showModal.value = false
	}


	// 支付
	const showPopup = ref(false)
	const openPopup = () => {}

	// 关闭弹层
	const closePopup = () => {
		showPopup.value = false
	}
	// 处理支付
	const handlerPay = async (payType) => {
		let flag = uni.getSystemInfoSync().platform === 'android'
		console.log(flag);
		if (!flag) {
			uni.showToast({
				title: '该平台不支持支付',
				icon: 'none'
			})
			return
		}

		if (payType === 2) {
			uni.showToast({
				title: '暂不支持微信支付',
				icon: 'none'
			})
			return
		}

		// 支付宝支付
		const res = await payApi(orderNo.value)

		if (flag) {
			// route({
			// 	type: 'redirectTo',
			// 	url: '/pages/order/orderList'
			// })
			// 支付成功唤起支付宝
			uni.requestPayment({
				provider: 'alipay',
				orderInfo: res.data.data,
				success: (res) => {
					console.log(res);
					route({
						type: 'redirectTo',
						url: '/pages/order/orderList'
					})
				},
				fail: (e) => {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				}
			})
		} else {
			console.log(flag);
		}
	}
</script>

<template>
	<view class="page">
		<!-- 导航栏 -->
		<view class="nav">
			<up-navbar :autoBack="true" :placeholder="true" border title="订单详情" rightIcon="more-dot-fill">
			</up-navbar>
		</view>
		<!-- 内容 -->
		<view class="content">
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="title">
					订单状态： <view v-if="orderDetails.orderStatus === 0" style="color: #32cd32">待付款</view>
					<view v-else-if="orderDetails.orderStatus === 1" style="color: #32cd32">已付款</view>
					<view v-else-if="orderDetails.orderStatus === 2" style="color: #1e90ff">
						待发货
					</view>
					<view v-if="orderDetails.orderStatus === 3" style="color: #ff69b4">已发货</view>
					<view v-if="orderDetails.orderStatus === 4" style="color: #8a2be2">交易成功</view>
					<view v-else-if="orderDetails.orderStatus === -1" style="color: #ea3322">
						手动关闭
					</view>
					<view v-else-if="orderDetails.orderStatus === -2" style="color: #ea3322">
						超时关闭
					</view>
					<view v-else-if="orderDetails.orderStatus === -3" style="color: #ea3322">
						商家关闭
					</view>
				</view>
				<view class="title">订单编号：<up-text :text="orderDetails.orderNo"></up-text></view>
				<view class="title">下单时间：<up-text :text="orderDetails.createTime"></up-text></view>
				<view class="but-box">
					<up-button v-if="orderDetails.orderStatus === 0" type="primary" color="#52ABAD" size="large"
						style="margin: 20rpx 0 ; " @click="showPopup = true">立即支付</up-button>

					<up-button v-if="orderDetails.orderStatus === 3" type="primary" color="#218838" size="large"
						style="margin: 20rpx 0 ; " @click="showModal = true">确定收货</up-button>

					<up-button v-if="!(orderDetails.orderStatus === 4 || orderDetails.orderStatus < 0)" type="info"
						size="large" @click="showModal = true">取消订单</up-button>
				</view>
			</view>

			<!-- 价格 -->
			<view class="price-box">
				<view class="title">商品价格：<up-text mode="price" color="red" size="20"
						:text="orderDetails.totalPrice"></up-text>
				</view>
				<view class="title">配置方式：<up-text text="普通快递"></up-text></view>
				<!-- 地址信息 -->
				<view class="address-info">
					<view class="title">收货人：
						<up-text :text="orderDetails.address?.userName"></up-text>
					</view>
					<view class="title">联系电话：
						<up-text :text="orderDetails.address?.userPhone"></up-text>
					</view>
					<view class="title">收货地址：
						<up-text :text=" orderDetails.address?.provinceName +
							'/' +
							orderDetails.address?.cityName +
							'/' +
							orderDetails.address?.regionName +
							'/' +
							orderDetails.address?.detailAddress"></up-text>
					</view>

				</view>
			</view>

			<!-- 商品列表 -->
			<view class="goods-list">
				<!-- 内容体：购买的商品数据 -->
				<scroll-view class="goods-section" scroll-y>
					<view class="goods-item" v-for="(item, index) in orderDetails.orderItemList" :key="index">
						<up-image width="150rpx" height="150rpx" :src="item.goodsImage"></up-image>
						<view class="right">
							<view>
								<up-text :lines="1" :text="item.goodsName"></up-text>
							</view>
							<view class="span">全场包邮</view>
							<view class="footer">
								<view class="price">
									<up-text mode="price" size="18" :text="item.sellingPrice"></up-text>
								</view>
								<view style="color: #57626F;">x{{ item.goodsCount }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>

		<!-- 模态框 -->
		<up-modal ref="modalRef" :title="orderDetails.orderStatus === 3 ? '确定收货了!!' : '确定取消订单吗？'" :show="showModal"
			showCancelButton showConfirmButton closeOnClickOverlay @confirm="confirmModal" @cancel="showModal = false"
			@close="closeModal">
		</up-modal>

		<!-- 支付 -->
		<up-popup v-if="orderDetails.orderStatus === 0" :show="showPopup" :closeable="true" :round="20" mode="bottom"
			@open="openPopup" @close="closePopup">
			<view class="popup-pay">
				<up-button size="large" @click="handlerPay(1)" color="#4187F2">支付宝支付</up-button>
				<up-button size="large" @click="handlerPay(2)" color="#6FBE91">微信支付</up-button>
			</view>
		</up-popup>
	</view>

</template>

<style lang="scss" scoped>
	.page {
		background-color: #F7F7F7;
	}

	.content {
		background-color: #F7F7F7;

		.title {
			color: #9B9B9B;
			display: flex;
			font-size: 30rpx;
			line-height: 60rpx;
		}

		.order-info {
			background-color: #fff;
			padding: 30rpx;
		}

		.price-box {
			margin: 20rpx 0;
			padding: 30rpx;
			background-color: #fff;
			height: 300rpx;
		}

		.goods-list {
			background-color: #fff;
			padding: 0 30rpx 20rpx;

			.goods-section {
				.goods-item {
					padding: 10rpx 20rpx;
					background-color: #fff;
					border-bottom: 1px solid #ccc;
					display: flex;

					&:last-child {
						border: none;
					}

					.right {
						margin-left: 20rpx;
						flex: 1;
						display: flex;
						flex-direction: column;

						.span {
							flex: 1;
							color: #57626F;
							font-size: .8rem;
						}

						.footer {
							display: flex;
							justify-content: space-between;
							margin-bottom: 10rpx;
						}
					}

				}
			}
		}
	}

	// 弹出支付方式
	.popup-pay {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		padding: 100rpx 30rpx;
		height: 250rpx;
	}
</style>